<template>

  <view>
    <web-view src="https://laiyu.1122334455.cn/useimage/chat.html"></web-view>
  </view>

	<!-- <view class="main">
		<u-navbar title="联系客服" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
			bgColor="#fff">
		</u-navbar>
		<scroll-view id="scrollview" scroll-y="true" :scroll-top="state.scrollTop" upper-threshold="5" @scrolltoupper="onScrolltoupper" :scroll-with-animation="true" class="scroll-view" :style="{height:'calc('+`${windowHeight()-inputHeight() - state.h}rpx`+' - var(--status-bar-height))'}">

			<view id="msglistview" class="chat-body">
				<view v-for="(item,index) in state.list" :key="index">
					<view class="item self">
						<view class="content">
							<view class="names">{{item.user.nickname}}</view>
							<view class="right">
								{{item.content}}
							</view> 
						</view>
						<image class="avatar" :src="item.user.avatar"></image>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="chat-bottom" :style="{height: `${inputHeight()}rpx`}">
			<view class="send-msg" :style="{bottom:`${state.keyboardHeight - 60}rpx`}">
				<view class="uni-textarea">
		
				   <input type="text" @focus="focus" @blur="blur" @confirm="handleSend" placeholder="快来聊天吧~" v-model="state.chatMsg"/>
				</view>
				<button @click="handleSend" class="send-btn">发送</button>
			</view>
		</view>

	</view> -->
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from 'vue';
	import sheep from '@/sheep';
	// import chart from '@/sheep/helper/chart.js';
	import {
		onLoad,onReachBottom
	} from '@dcloudio/uni-app';
	onLoad(async(options) => {
		// await getserviceList();
	});
	onReachBottom(() => {
		getservicList()
	});
	const state = reactive({
		h:245,
		titleStyle: 'fontWeight:bold',
		page:1,
		limit:20,
	    list:[],
		chatMsg:'',
		scrollTop:0,
		bottomHeight: 0,
		keyboardHeight:0,
	})
	const onScrolltoupper = ()=>{
		getserviceList();
	}
	
	const addScript = (url)=> {
		var script = document.createElement('script');
		script.src = url;
		document.body.appendChild(script);
	}
	
	
    // 列表
	async function getserviceList() {
		const {
			code,
			data
		} = await sheep.$api.user.serviceList({
			token:uni.getStorageSync('token'),
			order:1,//1倒序  2是正序
			page:state.page,
			limit:state.limit,
		})
		if (code == 1) {
			// state.list =data
			var list = data;
			if (list.length > 0) {
				list = list.reverse();
				state.list = [...list,...state.list]
				state.page = ++state.page;
			}
			// console.log(lsits,'111')
			// state.list =lsits
			nextTick(function(){
				scrollToBottom()
			})
		}
	}
	// 消息样式自适应代码
	function windowHeight() {
		    return rpxTopx(uni.getSystemInfoSync().windowHeight)
		}
	function inputHeight(){
			return state.bottomHeight+state.keyboardHeight
		}
		function focus(){
			scrollToBottom()
		}
		function blur(){
			scrollToBottom()
		}
	function scrollToBottom(e){
				setTimeout(()=>{
					let query = uni.createSelectorQuery().in(this);
					query.select('#scrollview').boundingClientRect();
					query.select('#msglistview').boundingClientRect();
					query.exec((res) =>{
						if(res[1].height > res[0].height){
							
							state.scrollTop = rpxTopx(res[1].height - res[0].height)
						}
					})
				},1000)
			}
			function rpxTopx(px){
				let deviceWidth = uni.getSystemInfoSync().windowWidth
				let rpx = ( 750 / deviceWidth ) * Number(px)
				return Math.floor(rpx)
			}
	// 发信息addService
	async function handleSend(){
		if(state.chatMsg=='')return
		const {
			code,
			data
		} = await sheep.$api.user.addService({
			token:uni.getStorageSync('token'),
			content:state.chatMsg
		})
		if (code == 1) {
			state.chatMsg=''
			state.page=1
			state.list=[]
			getserviceList()
		}
	}
	
</script>

<style lang="scss">
	page {
		.main {
			height: 100%;
			width: 100%;
			background-color: #F5F5F5;
		}
        .fasong{
			background: #1BDDD0;
		}
		.scroll-view {
			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			// // background-color: orange;
			background-color: #F6F6F6;

			.chat-body {
			
				display: flex;
				flex-direction: column;
				padding-top: 23rpx;
				// background-color:skyblue;

				.self {
					justify-content: flex-end;
				}

				.item {
					display: flex;
					padding: 23rpx 30rpx;
					// background-color: greenyellow;

					.right {
						background-color:#fff;
						max-width: 486rpx;
						border-radius: 8rpx;
						word-wrap: break-word;
						padding: 24rpx 24rpx;
						margin: 0 24rpx;
						border-radius: 5px;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 42rpx;
					}

					.left {
						background-color: #FFFFFF;
					}

					
					.content {
						position: relative;
						.names{
							text-align: right;
							max-width: 486rpx;
							border-radius: 8rpx;
							word-wrap: break-word;
							padding: 0 24rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999;
							line-height: 42rpx;
						}
			
					}

					.avatar {
						display: flex;
						justify-content: center;
						width: 78rpx;
						height: 78rpx;
						// background: $sendBtnbgc;
						border-radius: 50rpx;
						overflow: hidden;

						image {
							align-self: center;
						}

					}
				}
			}
}
			/* 底部聊天发送栏 */
			.chat-bottom {
				width: 100%;
				height: 100rpx;
				background: #F4F5F7;
				transition: all 0.1s ease;
				
				.send-msg {
					display: flex;
					align-items: flex-end;
					padding: 16rpx 30rpx;
					width: 100%;
					min-height: 177rpx;
					position: fixed;
					bottom: 0;
					background: #fff;
					transition: all 0.1s ease;
				}
			 
				.uni-textarea {
					padding-bottom: 105rpx;  
					textarea {
						width: 537rpx;
						min-height: 75rpx;
						max-height: 500rpx;
						background: #f1f1f1;
						border-radius: 40rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						color: #333333;
						line-height: 74rpx;
						padding: 5rpx 8rpx;
						text-indent: 30rpx;
					}
				}
			    
				.send-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 105rpx;
					margin-left: 25rpx;
					width: 120rpx;
					height: 75rpx;
					background: #1BDDD0;
					border-radius: 50rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.uni-textarea input{width: 530rpx; height: 75rpx; background: #f1f1f1; border-radius: 40rpx; padding-left: 20rpx; padding-right: 20rpx;}
</style>